<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表 </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 白色内容区 -->
        <div class="page_content">
            <el-button type="primary" @click="dialogFormVisible=true">新建角色</el-button>            
            <el-table :data="rolesList" style="width: 100%">
                <el-table-column prop="roleName" label="角色姓名" />
                <el-table-column prop="roleDesc" label="角色描述" />
                <el-table-column>
                    <template #default="scope">
                        <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新建编辑弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="editRowData.id? '编辑角色' : '新建角色'">
            <el-form
            ref="userForm"
            :model="formData"
            :rules="rules"
            >
                <el-form-item label="角色名" prop="roleName">
                    <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="formData.roleDesc" placeholder="请输入角色描述" />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="flex">
                    <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(userForm)">保存</el-button>
                </div>
            </template>

        </el-dialog>
    </div>
</template>

<script>
import { reactive, toRefs ,ref } from 'vue';
import { getRolesApi,addRolesApi,rolesdeleteApi } from '@/util/request';
export default {
    name: 'RolesList',
    setup(){
        const data=reactive({
            rolesList:[],
            dialogFormVisible:false,
            formData:{
                roleName:"",
                roleDesc:""
            },
            rules:{
                roleName:{
                    required:true,
                    message:"请输入角色名称",
                    trigger:"blur"
                },
                roleDesc:{
                    required:false,
                    trigger:"blur"
                }
                },
                editRowData:{}

        })
        const getList=()=>{//获取角色列表
            getRolesApi().then(res=>{
                data.rolesList=res.data
            })
        }
        const submitForm=formEl=>{
            formEl.validate(ref => {//formEl.validate()返回Promise,Promise的then方法接收一个回调函数,回调函数接收一个布尔值,true表示验证通过,false表示验证失败
                if (!ref) {
                    return
                }
                //表单验证通过接口
                addRolesApi(data.formData).then(res => {
                    if (res.data) {
                        alert("表单验证通过")
                        data.dialogFormVisible = false;//关闭弹窗
                        getList(); //刷新列表
                    }
                })

            })
        }
        const editRow=row=>{
            data.dialogFormVisible=true
            data.editRowData=row
            const {roleDesc,roleName}=row
            data.formData={
                roleName,
                roleDesc
            }

        }
        const deleteRow=row=>{
            rolesdeleteApi(row).then(res=>{
                getList()
            })
        }
        const userForm=ref()
        
        getList()
        return{
            ...toRefs(data),
            editRow,
            deleteRow,
            userForm,
            submitForm
        }
    }
}
</script>